<template>
	<view class="content">
		<view>
			<u-image :src="proDetail.cover" width="100%" height="360rpx"></u-image>
		</view>

		<view class="p20">
			<view class="bgc-fff br12 p26">
				<view class="z-flex z-flex-between">
					<view><text class="c-333">{{proDetail.name}}</text></view>
					<view class="c-red">
						<text class="fs24">￥</text>
						<text class="fs30 ml6 fwb">{{proDetail.price}}</text>
					</view>
				</view>
				<view class="mt15 fs26">
					<text>{{proDetail.unit}}</text>
				</view>
			</view>

			<view class="p30 bgc-fff mt20 br12">
				<view class="c-theme t-c mb30">-<text class="ml10 mr10 fs26">商品详情</text>-</view>
				<template v-for="(it,ind) in proDetail.detail">
					<u-image :src="it" mode="widthFix" :key="ind"></u-image>
				</template>
			</view>
		</view>
		
		<footerBottom>
			<view class="_add" @click="handEdit">
				编辑产品
			</view>
		</footerBottom>
	</view>
</template>

<script>
	import {
		getProDetailApi
	} from '@/api/shop.js'
	export default {
		data() {
			return {
				option: {},
				proDetail: {}
			}
		},
		onLoad(option) {
			option && (this.option = option)
		},
		onShow() {
			this.$nextTick(this.getProDetail)
		},
		onPullDownRefresh() {
			this.getProDetail()
		},
		methods: {
			async getProDetail() {
				uni.showLoading({
					title: '数据加载中...'
				})
				const {code,data} = await getProDetailApi({
					id: this.option.id
				})
				uni.hideLoading()
				uni.stopPullDownRefresh()
				if(code != 0) return
				this.proDetail = data
				this.proDetail.detail = data.detail.split(',')
			},
			handEdit(){
				const {name, id} = this.proDetail
				uni.$u.route({
					url: 'mapPages/backAdmin/pro_add/index',
					params: {
						id,
						navTile: name,
						pageType: 'edit'
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		._add{
			padding: 16rpx;
			background-color: $uni-color-theme;
			color: #FFFFFF;
			text-align: center;
			border-radius: 40rpx;
			width: 88%;
			margin: 0 auto;
			position: relative;
			top: 50%;
			transform: translateY(-50%);
		}
	}
</style>
